<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			.table,
			.list-group {
				margin-bottom: 0;
			}
			
			thead tr {
				font-weight: bold;
			}

			.skyblue{
				background: skyblue;
			}
		</style>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			添加：<input type="text" class="form-control" placeholder="姓名"> <input type="text" class="form-control" placeholder="年龄"> <button class="btn btn-info content">添加</button> 变色：<button class="btn btn-info content">开启移入变色</button>
			<br><br>

			<table class="table table-bordered">
				<thead>
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>33</td>
						<td>
							<a href="javascript:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>34</td>
						<td>
							<a href="javascript:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>王五</td>
						<td>25</td>
						<td>
							<a href="javascript:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>赵六</td>
						<td>16</td>
						<td>
							<a href="javascript:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>王四</td>
						<td>44</td>
						<td>
							<a href="javascript:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>6</td>
						<td>Danny</td>
						<td>23</td>
						<td>
							<a href="javascript:;">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
			<br> 搜索：
			<input type="text" class="form-control" placeholder="姓名"> <button class="btn btn-info content">搜索</button> 排序：<button class="btn btn-info content">年龄从小排序</button><br><br> 数组里存的是所有tr，排序的时候按照第三个单元格的innerHTML大小排序。最后按照新的顺序重新添加所有tr。
		</div>
		<script>
			//onclick带有on重复多个则会覆盖,如果添加监听事件则会叠加。
			
			
				var div_1 = document.getElementById('div1');
				var name_input = document.querySelector('[placeholder = "姓名"]');
				var age_input = document.querySelector('[placeholder = "年龄"]');
				var add_btn = div1.getElementsByTagName('button')[0];
				var changeColor_btn = div1.getElementsByTagName('button')[1];
				var tb = document.querySelector('tbody');
			//添加
				(function () {
					document.addEventListener('keydown',function(e){
						if ( e.keyCode == 13 && (document.activeElement == age_input || document.activeElement == name_input))
						 add_btn.click();
					});
					add_btn.addEventListener('click',function (){
						var tr = document.createElement('tr');		
						var index = tb.children.length + 1;
						var name = name_input.value;
						var age = age_input.value;
						if ( isNaN(age_input.value) == true || age_input.value == ''){
							name_input.value = '';
							age_input.value = '';
							return false;
						}
						var del = '<a href="javascript:;">删除</a>';
						var arr = [index, name, age, del];
						for ( let i = 0 ; i < arr.length; i++ ) {
							var td = document.createElement('td');
							td.innerHTML = '' + arr[i];
							tr.appendChild(td);	//每循环一次就appendChild 比较浪费性能 ,可改用innerHTML						
						}
						tb.appendChild(tr);
						delt();
					});
				})();

			//变色
			(function (){
				var changeColor_btn = div1.getElementsByTagName('button')[1];
				var trs = document.getElementsByTagName('tr');
				var control = false;
					changeColor_btn.addEventListener('click', function (e) {
							if (control == false) {
								startChange();							
								control = true;
								this.innerHTML = '关闭移入变色';
							}else{
								endChange();
								control = false;
								this.innerHTML = '开启移入变色';
							}					
							console.log(trs.length);
					});

				function startChange(){
						for ( let t = 0; t < trs.length; t++ ){
							trs[t].addEventListener('mouseover', colorChange);
							trs[t].addEventListener('mouseout', colorChange);
						}
				}

				function endChange(){
						for ( let t = 0; t < trs.length; t++ ){
							trs[t].removeEventListener('mouseover',colorChange);
							trs[t].removeEventListener('mouseout',colorChange);
						}
				}

				function colorChange(){
					this.classList.toggle('skyblue');
				}

			})();

				delt();
			//删除
			
				function delt (){
					var links = document.getElementsByTagName('a');			
					for ( let l = 0; l < links.length; l++ ) {
						links[l].addEventListener('click', function(e){
							e.preventDefault();
							this.parentNode.parentNode.remove();
							rank();
						});
					}
					

				}

			//排序
			var trs = document.getElementsByTagName('tr');
			function rank(){
				for ( var tr = 1 ; tr < trs.length; tr++ ){
					trs[tr].children[0].innerHTML = tr;
				}
			}

			//搜索

			(function (){
				var input_name = document.getElementsByTagName('input')[2];
				var search_btn = document.getElementsByClassName('btn')[2];
				var record = [];
				search_btn.addEventListener('click', searchItem);
				document.addEventListener('keydown',function (e) {
					if( e.keyCode == 13 ) search_btn.click();	
				});
				input_name.addEventListener('input',function () {
					if ( this.value == '' ){
						for( var i = 0; i < record.length; i++ ){
							trs[record[i]].classList.remove('skyblue');
							searchItem();
						}
						
					}
				});
					function searchItem(){
						var str;
						var input_val = input_name.value;
						for ( var i = 0; i < trs.length; i++ ) {	
							str = trs[i].children[1].innerText;
							for( var s = 0; s < str.length; s++ ){
								for ( var p = 0; p < input_val.length; p++ ){
									if (str[s] == input_val[p]){
										trs[i].children[1].parentNode.classList.add('skyblue');
										record.push(i);
									}
								}
							}
						}
					}
				
			})();


			//年龄排序
			(function () {
				var sort_btn =  document.getElementsByClassName('btn')[3];
				sort_btn.addEventListener('click',function(){
					for ( var i = 1; i < trs.length; i++ ) {	
						for ( var j = i + 1; j < trs.length; j++ ){
							if ( parseInt(trs[i].children[2].innerText) > parseInt(trs[j].children[2].innerText) ){
								trs[i].parentNode.insertBefore(trs[j],trs[i]);
							}
						}	
					}
					rank();
				});
			})();


			

		</script>
	</BODY>

</HTML>